<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div>
        <div class="text-center">
          <userAvatar :user="user"/>
        </div>
        <ul class="list-group list-group-striped">
          <li class="list-group-item">
            <svg-icon icon-class="user"/>
            用户名称
            <div class="pull-right">{{ user.userName }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="phone"/>
            手机号码
            <div class="pull-right">{{ user.phonenumber }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="email"/>
            用户邮箱
            <div class="pull-right">{{ user.email }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="tree"/>
            所属部门
            <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="peoples"/>
            所属角色
            <div class="pull-right">{{ roleGroup }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="date"/>
            创建日期
            <div class="pull-right">{{ user.createTime }}</div>
          </li>
        </ul>
      </div>
    </el-card>
    <el-card class="box-card" height="420">
      <div slot="header" class="clearfix">
        <span>基本资料</span>
      </div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本资料" name="userinfo">
          <userInfo :user="user"/>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="resetPwd">
          <resetPwd :user="user"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import {getUserProfile} from "@/api/system/user";

export default {
  name: "Profile",
  components: {userAvatar, userInfo, resetPwd},
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo"
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    }
  }
};
</script>
